<template>
  <div>
    <div v-if="!isChildrenWindow">
      <div>移动显示位置，rem: {{scssFunctions.baseRem}}</div>
    </div>
    <div class="content">
      <div class="router"
           v-if="!isChildrenWindow"
           :style="{height: height+'px'}"
      >
        <div
          v-for="(item,index) in vantRouter"
          :key="item.path+index"
          @click="routeItemClick(item)"
        >
          {{item.meta.title}}
        </div>
      </div>
      <div
        :style="{
             height: isChildrenWindow?height+'px':(height+2)+'px',
           width: isChildrenWindow?width+'px':(width+2)+'px',
           border: isChildrenWindow?'none':'1px solid red'
          }"
        class="base"
      >
        <router-view v-if="isChildrenWindow"></router-view>
        <iframe
          v-else
          :src="'/'+pageUrl"
          :style="{height: height+'px',width: width+'px'}"
          ref="iframeRef"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script>
import {vantRouter} from "@/router/vant-router";
import {getQueryObject, scssFunctions} from "@localModules/ZhiXinLib/utils";

export default {
  name: "VantRouteBase",
  computed:{
    pageUrl(){
      return location.hash + '?isChildrenWindow=1'
    },
    isChildrenWindow(){
      const queryObject = getQueryObject();
      return queryObject.isChildrenWindow === '1'
    }
  },
  mounted() {
    this.setPageUrl()
  },
  data(){
    return {
      scssFunctions,
      vantRouter,
      pageUrl: '',
      height: 812,
      width: 375,
    }
  },
  methods:{
    setPageUrl(){
      this.pageUrl = location.hash + '?isChildrenWindow=1'
    },
    routeItemClick(item){
      this.$router.push({
        path: item.path
      }).then(res=>{
        this.setPageUrl()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  display: flex;
  justify-content: space-between;
  .router{
    overflow: auto;
  }
  .base{
    overflow: hidden;
  }
}
iframe{
  border: none;
}
</style>
